<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 400px;
            height: 400px;
            background: white;
            margin-left: 850px;
            margin-top: 60px;
            text-align: center;
            border-radius: 5px;
        }
        .top{
            background: #efefef;
            height: 25px;
            font-size: 15px;
        }
        .top a{
            text-decoration: none;
            color: gray;
            font-size: 2px;
        }
        .top a:hover{
            color: red;
        }
        #d1 input{
           border-top: 4px solid red;
           border-bottom: 4px solid red;
           border-left: 4px solid red;
           border-right: 4px solid red;
            width: 500px;
            height: 35px;
        }
        #d1 button{

            background: red;
            border: red;
            width: 120px;
            height: 45px;
            border-bottom: 6px solid red;
            border-top: 3px solid red;

        }
        .clazz span{
            vertical-align: 50%;
        }
        .left{
            float: left;
            height: 100px;
            width: 170px;
        }
        .right{
            float: left;
           /* border: 1px solid red;*/
            width: 1000px;
            height: 120px;
        }
        .bottom{
            background: url("../image2/1.jpg");
            height: 500px;
            width: 1300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="top" >
        <div style="margin-left: 160px " >
            <a href="#"> 喵，欢迎来天猫&nbsp;&nbsp;&nbsp;</a>
            <a href="#">请登录&nbsp;&nbsp;&nbsp;</a>
            <a href="#">免费注册</a>

            <span style="margin-left: 600px">
                <a href="#"> 我的淘宝&nbsp;&nbsp;&nbsp;</a>
                <a href="#">购物车&nbsp;&nbsp;&nbsp;</a>
                 <a href="#">收藏夹&nbsp;&nbsp;&nbsp;</a>
                <a href="#">手机版&nbsp;&nbsp;&nbsp;</a>
                <a href="#">淘宝网&nbsp;&nbsp;&nbsp;</a>
                <a href="#">商家支持&nbsp;&nbsp;&nbsp;</a>
                <a href="#">网站导航&nbsp;&nbsp;&nbsp;</a>
            </span>
        </div>
    </div>
    <div class="left" style="margin-left: 130px">
        <img src="../image2/logo.png" width="250px" height="120px">
    </div>
    <div class="right" id="d1">
             <input type="text" placeholder="搜索 天猫 商品/品牌/店铺" style="margin-top: 50px; margin-left: 100px">
        <button type="submit" ><font size="3" color="white">搜索</font></button>
    </div>

    <div class="bottom" style="clear: both">
        <br/>
        <div class="content">
            <form method="get" action="#" autocomplete="off">
                <div>注册详情</div>
                <hr/>
                <div>
                    <label for="username">姓名</label>
                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                </div>
                <div>
                    <label for="pwd">密码</label>
                    <input type="password" name="pwd" id="pwd" placeholder="请输入密码名">
                </div>
                <div>
                    <label for="email">邮箱</label>
                    <input type="email" name="email" id="email" placeholder="请输入邮箱">
                </div>
                <div>
                    <label for="tel">手机</label>
                    <input type="tel" name="tel" id="tel" placeholder="请输入手机号">
                </div>
                <hr/>
                <div>
                    <label for="gender">性别:</label>
                    <input type="radio" name="gender" value="man" id="gender" >男&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" value="女" >女&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" value="其他" >其他
                </div>
                <div>
                    <label for="hobby">爱好:</label>
                    <input type="checkbox" name="hobby" value="music" id="hobby" >音乐
                    <input type="checkbox" name="hobby" value="movie" >电影
                    <input type="checkbox" name="hobby" value="game" >游戏
                </div>
                <div>
                    <label for="birthday">出生日期:</label>
                    <input type="date" name="birthday" id="birthday" >
                </div>
                <div>
                    <label >所在城市:</label>
                    <select>
                        <option>--请选择所在的城市--</option>
                        <optgroup label="直辖市">
                            <option>北京</option>
                            <option>上海</option>
                        </optgroup>
                        <optgroup label="省会">
                            <option>武汉</option>
                            <option>郑州</option>
                        </optgroup>
                    </select>
                </div>
                <hr/>
                <div>
                    <label style="vertical-align: top">个性签名</label>
                    <textarea placeholder="请写下你的与众不同" rows="5" cols="40"></textarea>
                </div>
                <hr/>
                <div>
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>